<template>
    <div class="content-box"  >
      <img v-if="data" :src="data.images[0]" alt=""  @click="goDetails(data.id)">
      <div class="title">{{data.title}}</div>
      <div class="msg-box" >
        
        <div class="user"><div class="touxiang"><img :src="data.user.avatar" alt=""></div><div class="auter">{{data.user.username}}</div></div>
        <div class="good" @click="gooded" id="0"><span>{{data.count.count_liked}}</span><van-icon :name="zan"></van-icon></div>
      </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                islike:false,
                zan:'good-job-o'
            }
        },

        props:[
            'data'
        ],

        methods:{

            gooded(){
                if(this.islike==false){
                    this.zan='good-job'
                    this.islike = true
                   this.data.count.count_liked+=1
                }else{
                    this.zan='good-job-o'
                    this.islike = false,
                    this.data.count.count_liked-=1
                }
            },

            goDetails(id){
              
               this.$router.push({name: 'Notesdetails', query: {id}});
               
      },

        }


    }
</script>


<style lang="less" >

    .content-box{
   
    margin: 2px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 5px;

    .title{
        font-size: 14px;
        margin: 10px;
      }


    .msg-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
       margin: 10px;

      img{
        border-radius: 50%;
      }

    
      .user{
      display: flex;
      
      align-items: center;

      .touxiang{
        width: 25px;
        height: 25px;
        border-radius: 50%;
      }

      .auter{
        margin-left: 5px;
      }


    }

      .good{
        font-size: 14px;
      }

      

      

    }




    img{
      border-radius: 5px 5px 0px 0px;
    max-width: 100%;
    max-height: 100%;
  }
  }


</style>